<template>
    <van-form @submit="dataFormSubmit">
        <van-cell-group class="container">
            <van-field input-align="right"
                       v-model="fieldValue"
                       is-link
                       readonly
                       label="所在地区"
                       placeholder="请选择所在地区"
                       @click="show = true"/>
            <van-popup v-model="show" round position="bottom">
                <van-cascader
                        v-model="cascaderValue"
                        title="请选择所在地区"
                        :options="cityOptions"
                        @close="show = false"
                        @change="onChange"
                        @finish="onFinish"
                />
            </van-popup>
            <van-field v-model="dataForm.school_name" label="学校名称" is-link input-align="right" placeholder="请填写学校名称"/>
            <van-field v-model="dataForm.contacts" label="联系人" is-link input-align="right" placeholder="请填写联系人姓名"/>
            <van-field v-model="dataForm.phone" label="手机号码" is-link input-align="right" type="digit"
                       placeholder="请填写手机号码"/>

        </van-cell-group>
        <div>
            <van-button block type="warning"
                        native-type="submit"
                        :disabled="confirmLoading"
                        :loading="confirmLoading"
                        loading-text="信息提交中..." class="confirm_btn">提交信息

            </van-button>
        </div>
    </van-form>
</template>

<script>
// @ is an alias to /src
import $api from "@/api/index"
import {mapGetters} from 'vuex'

import {
  getUserInfo,
  setUserInfo
} from "@/utils/auth";
export default {
  name: "userInfo",
  components: {},
  data() {
    return {
      show: false,
      confirmLoading: false,
      dataForm: {
        order_number: '',
        openid: '',
        city_id: '',
        country_id: '',
        province_id: '',
        school_name: '',
        one_pwd: '',
        two_pwd: '',
        contacts: '',
        phone: '',
        serve_code: ''
      },
      btnLoading: false,
      blockLoading: false,
      fieldValue: '',
      cascaderValue: '',
      tabIndex: 0,
      oneCityIndex: 0,
      cityOptions: [],
    };
  },
  created() {
    this.loadCityInitData().then(() => {
      this.setUserInfo()
    })
  },
  computed: {
    ...mapGetters(['info'])
  },
  methods: {
    setUserInfo(){
      let info = getUserInfo().school_info
      this.dataForm = info
      const province_id = info.province_id
      const city_id = info.city_id
      const country_id = info.country_id
      this.loadCityInitData(province_id, 0).then(() => {
        this.loadCityInitData(city_id, 1).then(() => {
          let provinceIndex = this.cityOptions.findIndex(item => item.id == province_id)
          let cityIndex = this.cityOptions[provinceIndex].children.findIndex(item => item.id == city_id)
          let countryIndex =  this.cityOptions[provinceIndex].children[cityIndex].children.findIndex(item => item.id == country_id)
          let province = this.cityOptions[provinceIndex].text
          let city = this.cityOptions[provinceIndex].children[cityIndex].text
          let country =  this.cityOptions[provinceIndex].children[cityIndex].children[countryIndex].text
          this.fieldValue=`${province}/${city}/${country}`
        })
      })
    },
    getCityList(id){
      return new Promise((resolve, reject) => {
        $api.baseInfo.getCityList({id}).then(res => {
          res.data.map(item => {
            item.text = item.name
            item.value = item.id
            if (this.tabIndex != 1) {
              item.children = []
            }
            return item
          })
          resolve(res.data)
        })
      })
    },
    // 加载城市列表
    loadCityInitData (id, tabIndex) {
      return new Promise((resolve, reject) => {
        if (id && id !== '0' && tabIndex == 0) {
          this.getCityList(id, true).then(data => {
            this.oneCityIndex = this.cityOptions.findIndex(item => item.id === id)
            const ThisOption = this.cityOptions[this.oneCityIndex]
            ThisOption.children = data
            this.cityOptions = [...this.cityOptions];
            resolve()
          })
        } else if (id && id !== '0' && tabIndex == 1) {
          this.getCityList(id, true).then(data => {
            const OneChildren = this.cityOptions[this.oneCityIndex].children
            const ThisOption = OneChildren[OneChildren.findIndex(item => item.id === id)]
            ThisOption.children = data
            this.cityOptions = [...this.cityOptions];
            resolve()
          })

        } else if (!id || id === '0') {
          this.getCityList().then(data => {
            this.cityOptions = data
            resolve()
          })
        }
      })
    },
    onChange({value, tabIndex}) {
      this.tabIndex = tabIndex
      this.loadCityInitData(value, tabIndex)
    },
    onFinish({selectedOptions}) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
      this.cascaderValue = selectedOptions.map((option) => option.id);
    },
    // 表单提交
    dataFormSubmit() {
      console.log(this.cascaderValue)
      this.confirmLoading = true
      if(this.cascaderValue.length>0){
        this.dataForm .province_id=this.cascaderValue[0]
        this.dataForm .city_id=this.cascaderValue[1]
        this.dataForm .country_id=this.cascaderValue[2]
      }
      $api.school.schoolEdit(this.dataForm).then(res => {
        this.$toast.success({
          message: res.message,
          duration: 1500,
          onClose: () => {
            setUserInfo(res.data)
            this.$router.go(-1)
          }
        })

      }).finally(() => {
        this.confirmLoading = false
      })
    }
  }
};
</script>
<style lang="scss" scoped>
    ::v-deep {
        .container {
            margin-top: 10px;
            .van-cell {
                padding-left: 36px;
                padding-right: 36px;
                padding-top: 30px;
                padding-bottom: 30px;
                &:after {
                    left: 0;
                    right: 0;
                }
                .van-field__label {
                    font-size: 28px;
                    color: #555555;
                }

            }
        }
        .confirm_btn {
            width: 376px;
            height: 74px;
            background: linear-gradient(180deg, #FF9C70 0%, #FF804E 100%);
            border-radius: 10px;
            font-size: 28px;
            margin: 90px auto;
        }
    }
</style>
